<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="videoShow1">
					<video class="videoShow" id="myVideo" :autoplay="false" :src="classInfo.videoUrl"></video>
				</view>
				<view class="videoShowitem">
					<view>观看·{{ classInfo.viewCount }}</view>
					<view class="custom-share-view">
						<!-- 自定义分享样式 -->
						<image src="../../static/icon/Share.png" class="share-icon" />
						·{{ classInfo.shareCount }}
						<!-- 隐藏的分享按钮 -->
						<button @tap="handShareCountAdd" open-type="share" class="hidden-share-btn" :data-item="shareData" @tap.stop></button>
					</view>
					<view @tap="handleLike" class="like-wrap">
						<image v-if="classInfo.likeFlag == 0" class="date_image" src="../../static/images/collect.png"></image>
						<image v-else class="date_image" src="../../static/images/like1.png"></image>
						{{ classInfo.likeCount }}
					</view>
				</view>
				<view class="check_tiem">
					<u-subsection :list="tabList" :current="curNow" @change="sectionChange" active-color="#19E820"></u-subsection>
				</view>
				<view class="fotter">
					<view class="jieshao" v-if="curNow == 0">
						<view v-if="classInfo.fileListPic" class="j-img">
							<scroll-view style="height: 100%" :scroll-y="true">
								<view class="img-wrap">
									<image mode="widthFix" v-for="(item, index) in classInfo.fileListPic" :key="index" :src="item.fileUrl"></image>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="pinlun" v-else-if="curNow == 1">
						<view class="pinlun-wrap" v-if="commentList.length > 0">
							<scroll-view style="height: 100%" :scroll-y="true">
								<view class="p-wrap" v-for="(item, index) in commentList" :key="index">
									<view class="p-cover">
										<image @tap="lookMarket(item.briefUserInfo.userId)" :src="item.briefUserInfo.avatar" mode=""></image>
									</view>
									<view class="p-right">
										<view
											class="content-item"
											@touchstart="handleTouchStart"
											@touchend="handleTouchEnd"
											@touchcancel="handleTouchEnd"
											@longpress.prevent="handleLongPress(item)"
										>
											<view class="p-name">{{ item.briefUserInfo.nickName }}</view>
											<view class="p-content">{{ item.commentInfo }}</view>
											<view class="p-foot">
												<view style="display: flex" class="">
													<view class="p-data">{{ item.createTime }}</view>
													<view class="p-address">
														{{ item.briefUserInfo.province ? item.briefUserInfo.province : '未知' }}
													</view>
												</view>
												<view @tap="handleReply(item)" class="p-btn">回复</view>
											</view>
										</view>
										<view v-if="item.expanded">
											<view
												v-for="(item1, index1) in item.children"
												:key="index1"
												@touchstart="handleTouchStart"
												@touchend="handleTouchEnd"
												@touchcancel="handleTouchEnd"
												@longpress.stop="handleLongPress(item1)"
												class="child-content"
											>
												<view class="c-head">
													<view class="c-cover">
														<image @tap="lookMarket(item1.briefUserInfo.userId)" class="avatar" :src="item1.briefUserInfo.avatar" />
													</view>
													<view class="c-name">
														{{ item1.briefUserInfo.nickName }}
													</view>
												</view>
												<view class="c-content">
													{{ item1.commentInfo }}
												</view>
												<view class="c-foot">
													{{ item.createTime + ' ' + item.briefUserInfo.province }}
												</view>
											</view>
										</view>
										<!-- 展开按钮 -->
										<view v-show="item.children.length > 0" class="expand-btn" @tap="handleExpand(item, index)">
											<text>{{ item.expanded ? '收起' : '展开' }}{{ item.children.length }}条回复</text>
											<text class="arrow">{{ item.expanded ? '▲' : '▼' }}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<u-empty v-else mode="list"></u-empty>
						<view class="p-input">
							<u--input
								@blur="onInputBlur"
								:focus="inputFocus"
								v-model="conmment"
								shape="circle"
								:placeholder="commentName ? '回复@' + commentName : '请输入内容'"
								clearable
							></u--input>
							<button @tap="handleSend" type="primary">发送</button>
						</view>
					</view>
					<view class="dianzan" v-else>
						<view class="dianzan-wrap" v-if="likeList.length > 0">
							<scroll-view style="height: 100%" :scroll-y="true">
								<view class="p-wrap" v-for="(item, index) in likeList" :key="index">
									<view class="p-cover">
										<image :src="item.avatar" @tap="lookMarket(item.userId)" mode=""></image>
									</view>
									<view class="p-right">
										<view class="p-name">{{ item.nickName }}</view>
										<view class="p-foot">
											<view style="display: flex" class="">
												<view class="p-data">{{ item.customDate }}</view>
												<view class="p-address">{{ item.province ? item.province : '未知' }}</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<u-empty v-else mode="list"></u-empty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
import { mapState } from 'vuex'; // 关键导入
const api = require('../../util/api.js');
export default {
	components: {
		CustomNavbarTwo
	},
	data() {
		return {
			keyboardHeight: 0, // 新增键盘高度监听
			hasInputContent: false, // 标记是否有输入
			inputFocus: false, // 控制输入框聚焦
			commentName: '',
			conmment: '',
			conmmentId: '',
			classInfo: {},
			pageTitle: '芬享会详情页',
			showSex: false,
			videoList: [
				{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				}
			],
			tabList: ['介绍', '评论(5)', '点赞(999)'],
			curNow: 0,
			Data: [
				{
					name: '123456',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					note: '09-12 00:34 浙江'
				},
				{
					name: '123456',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					note: '09-12 00:34 浙江'
				},
				{
					name: '123456',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					note: '09-12 00:34 浙江'
				}
			],
			isPlay: false,
			showPayModal: false,
			watch: false,
			content: '学习内容定时更新，随到随学',
			commentList: [],
			likeList: [],
			classId: ''
		};
	},
	onLoad(options) {
		this.classId = options.id;
		this.getInfo(options.id);
		this.getCommentLst();
		this.getLikeList();
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	onUnload() {
		uni.offKeyboardHeightChange(); // 组件卸载时移除监听
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.pageTitle, //分享的名称
			path: `/page/fenxiang/detail?id=${this.classId}`,
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.pageTitle,
			path: `/page/fenxiang/detail?id=${this.classId}`,
			mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
		};
	},
	computed: {
		...mapState(['userInfo', 'pubInfoUserInfo'])
	},
	methods: {
		handleTouchStart(e) {
			e.currentTarget.classList.add('active');
		},
		handleTouchEnd(e) {
			e.currentTarget.classList.remove('active');
		},
		// 新增长按处理
		handleLongPress(message) {
			if (message.canDelete == '0' || message.canDelete == null) {
				return;
			}
			const isChild = message.parentId != '0'; // 判断是否是回复
			const action = isChild ? '删除这条回复' : '删除这条评论';
			uni.showModal({
				title: '删除确认',
				content: `确定要${action}吗？`,
				success: async (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '删除中...'
						});
						try {
							// 根据类型调用不同接口
							const apiUrl = this.$api.handleDeleteComment;
							const res = await this.$https.post(apiUrl, {
								id: message.id
							});
							if (res.code === 200) {
								// 更新本地数据
								if (isChild) {
									// 删除回复
									this.commentList.forEach((parent) => {
										parent.children = parent.children.filter((child) => child.id !== message.id);
									});
								} else {
									// 删除主评论
									this.commentList = this.commentList.filter((item) => item.id !== message.id);
								}
								// 更新总数
								uni.showToast({
									title: `删除成功`
								});
								this.getInfo(this.classId);
							}
						} catch (e) {
							console.error('删除失败:', e);
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							});
						} finally {
							uni.hideLoading();
						}
					}
				}
			});
		},
		//查看商家
		lookMarket(id) {
			uni.navigateTo({
				url: '/page/market/index?id=' + id
			});
		},
		//浏览
		liulan() {
			const data = {
				pubInfoId: this.classId,
				operateType: '2'
			};
			this.$https.post(this.$api.viewCountAdd, data).then((res) => {
				if (res.code === 200) {
					console.log('浏览成功');
					this.classInfo.viewCount = this.classInfo.viewCount + 1;
				} else {
					console.log('浏览失败');
				}
			});
		},
		//增加分享次数
		handShareCountAdd() {
			this.$https
				.post(this.$api.getShareCountAdd, {
					courseDetailId: this.classId
				})
				.then((res) => {
					if (res.code === 200) {
						this.classInfo.shareCount++;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		//展开收起评论
		handleExpand(item, index) {
			if (item.expanded) {
				this.commentList[index].expanded = false;
			} else {
				this.commentList[index].expanded = true;
			}
		},
		// 输入框失去焦点处理
		onInputBlur() {
			setTimeout(() => {
				// 延迟确保键盘完全收起
				if (!this.conmment && this.keyboardHeight === 0) {
					this.conmment = '';
					this.commentName = '';
				}
			}, 300);
		},
		//点赞
		handleLike() {
			if (!this.userInfo.userId) {
				return uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			this.$https
				.post(this.$api.getCourseLike, {
					pubInfoId: this.classId,
					operateType: 3,
					processType: this.classInfo.likeFlag == 0 ? 1 : 0
				})
				.then((res) => {
					if (res.code === 200) {
						this.getInfo(this.classId);
						this.getLikeList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		//获取信息
		getInfo(id) {
			this.$https
				.post(this.$api.getCourseInfo, {
					resourceType: id
				})
				.then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.classInfo = res.data;
						this.pageTitle = res.data.title;
						this.tabList = ['介绍', '评论' + '(' + res.data.commentCount + ')', '点赞' + '(' + res.data.likeCount + ')'];
						this.liulan();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		sectionChange(index) {
			this.curNow = index;
		},
		handleCancel() {
			uni.navigateBack({
				delta: 1 // 返回的页面层级，1表示返回上一页
			});
		},
		//获取评论
		getCommentLst() {
			this.commentList = [];
			this.$https
				.post(this.$api.getCourseDetailComment, {
					courseDetailId: this.classId,
					pageNum: 1,
					pageSize: 100
				})
				.then((res) => {
					if (res.code === 200) {
						console.log(res, 666);
						res.data.forEach((item) => {
							item.expanded = false;
							this.commentList.push(item);
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		//点赞列表
		getLikeList() {
			this.$https
				.post(this.$api.getCourseLikeList, {
					id: this.classId
				})
				.then((res) => {
					if (res.code === 200) {
						this.likeList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		//发生评论
		handleSend() {
			if (!this.userInfo.userId) {
				return uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			if (!this.conmment) {
				return uni.showToast({
					title: '请输入评论消息',
					icon: 'none'
				});
			}
			this.$https
				.post(this.$api.getAddComment, {
					parentId: this.commentName ? this.conmmentId : '',
					commentInfo: this.conmment,
					courseDetailId: this.classInfo.id
				})
				.then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '留言成功',
							icon: 'success'
						});
						this.conmment = '';
						this.commentName = '';
						this.getCommentLst();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
		},
		//谈起对话框
		handleReply(item) {
			if (!this.userInfo.userId) {
				return uni.navigateTo({
					url: '/pages/index/index'
				});
			}
			this.inputFocus = false; // 先重置状态
			this.commentName = item.briefUserInfo.nickName;
			this.conmmentId = item.id;
			this.$nextTick(() => {
				this.inputFocus = true;
				// uni.pageScrollTo({ scrollTop: 99999, duration: 300 }); // 滚动到底部
			});
		},
		// 点击自定义播放按钮
		onCustomPlay() {
			if (!this.hasPaid) {
				// 显示支付弹框
				this.showPayModal = true;
			} else {
				// 已支付，直接播放视频
				this.playVideo();
			}
		},
		// 支付确认
		onPayConfirm() {
			uni.navigateTo({
				url: `/page/kaitonghuiyuan/index`
			});
			// 模拟支付逻辑
			// this.showPayModal = false;
			// this.hasPaid = true;
			// this.watch = true;
			// // 支付完成后自动播放视频
			// this.playVideo();
		},
		// 支付取消
		onPayCancel() {
			this.showPayModal = false;
		},
		// 控制视频播放
		playVideo() {
			const video = this.$refs.myVideo;
			if (video) {
				video.play();
			}
		},
		// 视频播放事件回调（可选）
		onVideoPlay() {
			console.log('视频开始播放');
		}
	}
};
</script>
<style lang="scss" scoped>
.my_container {
	height: 100%;
	width: 100%;

	.my_container_body {
		width: 750rpx;
		background: linear-gradient(180deg, #ddffde 0%, #ffffff 29%, #ffffff 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		height: 100%;

		.my_container_body_head {
			width: 686rpx;
			height: 176rpx;
		}

		.my_container_body_body {
			width: 686rpx;
			height: calc(100% - 176rpx);
			margin-left: 32rpx;

			.foot-btn {
				width: 686rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #1ee825;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				color: #fff;
				text-align: center;
				margin-top: 20rpx;
			}

			.videoShow1 {
				padding-top: 20rpx;
			}

			.videoShow {
				width: 686rpx;
				height: 380rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}

			.t-wrap {
				text-align: center;

				.t-middle {
					margin-top: 30rpx;
					height: 116rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 36rpx;
					color: #ff4400;
					line-height: 58rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}

			.b-middle {
				margin-top: 10rpx;
				text-align: center;
				font-size: 24rpx;
				text-decoration: underline;
			}

			.custom-play-button {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				padding: 10px 20px;
				border-radius: 5px;
				cursor: pointer;
			}

			.pay-modal {
				position: fixed;
				top: 25%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #fff;
				padding: 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
				z-index: 20;
			}

			.pay-modal .buttons {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
			}

			.videoShowitem {
				height: 38rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				height: 38rpx;
				line-height: 38rpx;

				.time-wrap {
					width: 200rpx;
					display: flex;

					.t-time {
						font-size: 22rpx;
					}
				}

				image {
					width: 38rpx;
					height: 38rpx;
				}

				.like-wrap {
					display: flex;
				}
			}

			.check_tiem {
				width: 686rpx;
				margin-top: 34rpx;
			}

			.fotter {
				height: calc(100% - 590rpx);

				.jieshao {
					height: 100%;

					.j-img {
						height: 100%;
						margin-top: 20rpx;

						.img-wrap {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
						}

						image {
							width: 100%;
							margin-bottom: 20rpx;
							// border-radius: 20rpx;
						}
					}
				}

				.pinlun {
					height: 100%;

					.pinlun-wrap {
						height: 100%;
						// height: calc(100% - 140rpx);
						padding-bottom: 160rpx;
					}

					.p-wrap {
						margin-top: 40rpx;
						display: flex;

						.p-cover {
							width: 60rpx;
							height: 60rpx;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}
						}

						.p-right {
							margin-left: 6rpx;
							flex: 1;

							.content-item {
								/* 默认样式 */
								background-color: transparent;
								transition: background-color 0.3s;

								/* 添加过渡效果使变化更平滑 */
								&:active {
									/* 长按或按住时的样式 */
									background-color: #dddddd;
									/* 设置为想要的背景颜色 */
								}
							}

							.p-name {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 28rpx;
								color: #333333;
								font-style: normal;
								text-transform: none;
							}

							.p-time {
								margin: 6rpx 0;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-size: 20rpx;
								color: #777777;
							}

							.p-content {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 16rpx;
							}

							.p-foot {
								display: flex;
								justify-content: space-between;

								.p-data {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-address {
									margin-left: 14rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-btn {
									justify-content: flex-end;
									width: 50rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #19e820;
								}
							}

							.child-content {
								margin-top: 10rpx;
								/* 默认样式 */
								background-color: transparent;
								transition: background-color 0.3s;

								/* 添加过渡效果使变化更平滑 */
								&:active {
									/* 长按或按住时的样式 */
									background-color: #dddddd;
									/* 设置为想要的背景颜色 */
								}

								.c-head {
									display: flex;

									.c-cover {
										width: 40rpx;
										height: 40rpx;

										image {
											width: 100%;
											height: 100%;
											border-radius: 50%;
										}
									}

									.c-name {
										margin-left: 10rpx;
										font-size: 24rpx;
										color: #616161;

										text {
											margin-left: 6rpx;
											color: #999;
										}
									}
								}

								.c-content {
									margin-top: 6rpx;
									font-size: 28rpx;
								}

								.c-foot {
									font-size: 24rpx;
									color: #616161;
								}
							}

							.expand-btn {
								padding: 10rpx 0;
								font-size: 22rpx;
								color: #75767a;
							}
						}
					}

					.p-input {
						background-color: #fff;
						bottom: 0rpx;
						padding-bottom: 50rpx;
						position: fixed;
						display: flex;

						::v-deep .u-input {
							width: 512rpx;
						}

						button {
							font-size: 30rpx;
							margin-left: 20rpx;
							width: 148rpx;
							height: 80rpx;
							background: #1ee825;
							border-radius: 112rpx 112rpx 112rpx 112rpx;
						}
					}
				}

				.dianzan {
					height: 100%;

					.dianzan-wrap {
						height: 100%;
					}

					.p-wrap {
						margin-top: 40rpx;
						display: flex;

						.p-cover {
							width: 60rpx;
							height: 60rpx;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}
						}

						.p-right {
							margin-left: 6rpx;
							flex: 1;

							.p-name {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 28rpx;
								color: #333333;
								font-style: normal;
								text-transform: none;
							}

							.p-time {
								margin: 6rpx 0;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-size: 20rpx;
								color: #777777;
							}

							.p-content {
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 16rpx;
							}

							.p-foot {
								display: flex;
								justify-content: space-between;

								.p-data {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-address {
									margin-left: 14rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
								}

								.p-btn {
									justify-content: flex-end;
									width: 50rpx;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 24rpx;
									color: #19e820;
								}
							}
						}
					}
				}
			}
		}
	}
}

.custom-share-view {
	position: relative;
	// width: 100rpx;
	display: flex;
	height: 80rpx;
}

::v-deep .hidden-share-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 60rpx;
	height: 60rpx;
	opacity: 0;
	z-index: 2;
}
</style>
